<template>
    <section>
        <div class="zzc" v-show="menuShow" @click="setMenuShow(false)"></div>
        <transition name="fade">
            <div class="my-card" v-show="menuShow">
                <div v-for="menu in menus" v-bind:key="menu.id" class="text" @click="clickMenu">
                    {{ menu.title }}
                </div>
            </div>
        </transition>
    </section>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        name: "imenus",
        data() {
            return {}
        },
        computed: {
            ...mapState({
                menus: state => state.app.menus,
                menuShow: state => state.app.menuShow
            })
        },
        methods: {
            ...mapMutations({
                setMenuShow: 'app/setMenuShow'
            }),
            clickMenu() {
                this.setMenuShow(false)
            }
        }
    }
</script>

<style scoped lang="less">
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    .my-card {
        z-index: 99;
        position: absolute;
        left: 0;
        bottom: 7vh;
        background: #FFFFFF;
        width: 50vw;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0 2px 0 0;

        border-radius: 2px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .text {
            font-size: 14px;
            color: #606266;
            padding: 12px 20px;
            border-bottom: 1px solid #DCDFE6;
        }

        .text:active {
            background: #409EFF;
        }
    }

    .zzc {
        background: Transparent;
        height: 93vh;
        z-index: 98;
    }

</style>
